import React from 'react';
import { Star, Play, ArrowRight } from 'lucide-react';
import CTAForm from './CTAForm';

export default function Hero() {
  return (
    <div className=" ">
      <div className="container mx-auto px-4 pt-20 pb-16">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          {/* Left Column - Text Content */}
          <div className="order-2 lg:order-1 space-y-8 ">
            <div className="space-y-6">
              <div className="inline-flex items-center px-4 py-2 rounded-full bg-rose-50 dark:bg-rose-900/30 border border-rose-200 dark:border-rose-700">
                <span className="text-sm font-medium text-rose-700 dark:text-rose-300">🚀 全新升级</span>
              </div>
              
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight">
                <span className="bg-gradient-to-r from-rose-600 to-rose-700 bg-clip-text text-transparent">
                  VideoFlow
                </span>
                <br />
                视频制作管理
              </h1>
              
              <p className="text-xl sm:text-2xl text-gray-700 dark:text-gray-300 leading-relaxed">
                提升
                <span className="text-rose-600 dark:text-rose-400 font-semibold">企业培训视频</span>、
                <span className="text-rose-600 dark:text-rose-400 font-semibold">短视频内容营销</span>、
                <span className="text-rose-600 dark:text-rose-400 font-semibold">在线课程制作</span>
                的全流程创作效率！
              </p>
              
              <div className="space-y-3 text-gray-600 dark:text-gray-400">
                <p className="flex items-center text-lg">
                  <ArrowRight className="w-5 h-5 mr-3 text-rose-500" />
                  功能：项目文案、制作进度、文案创作、脚本管理
                </p>
                <p className="flex items-center text-lg">
                  <ArrowRight className="w-5 h-5 mr-3 text-rose-500" />
                  工具：提词器、封面制作、音乐库、PPT制作
                </p>
              </div>
            </div>
            
            <div className="space-y-6">
              <CTAForm />
              
              <div className="flex items-center space-x-6">
                <div className="flex items-center space-x-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
                  ))}
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  <span className="font-semibold text-gray-900 dark:text-white">开放内测中</span>
                  <span className="mx-2">•</span>
                  <span>1000+ 用户信赖</span>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column - Video */}
          <div className="order-1 lg:order-2 relative">
            <div className="relative aspect-video w-full rounded-2xl shadow-2xl overflow-hidden bg-white/10 backdrop-blur-sm border border-white/20">
              {/* 背景渐变层 - 添加 pointer-events-none */}
              <div className="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-indigo-500/10 pointer-events-none" />
              
              {/* iframe - 提升z-index */}
              <iframe
                src="https://player.bilibili.com/player.html?aid=1303495705&bvid=BV1Bu4m1F7zv&cid=1509806825&p=1&high_quality=1&danmaku=0&muted=1"
                className="relative w-full h-full rounded-2xl z-10"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                loading="lazy"
                title="创想家视频介绍"
              />
              
              {/* 边框层 - 添加 pointer-events-none */}
              <div className="absolute inset-0 rounded-2xl ring-1 ring-black/5 pointer-events-none z-20" />
            </div>
            
            {/* Floating elements */}
            <div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-r from-rose-500 to-indigo-500 rounded-full opacity-20 blur-xl pointer-events-none" />
            <div className="absolute -bottom-4 -left-4 w-32 h-32 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full opacity-20 blur-xl pointer-events-none" />
          </div>
        </div>
      </div>
    </div>
  );
}
